<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        .a {
            margin-bottom: 10px;
        }

        .b {
            margin-top: 30px;
        }

        .c {
            background-color: #f00;
        } */

        .c {
            /* overflow: auto; */
            /* position: absolute; */
            display: inline-block;
            background-color: #f00;
        }

        .c1 {
            float: left;
            /* background-color: #ddd; */
        }

        .c2 {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* display: inline-block; */
            overflow: hidden;
        }
    </style>
</head>

<body>

    <!-- 
        BFC:block formatting context  块级格式化上下文
        是一种页面渲染规则

        规则：  
            1 块级元素会自上而下进行排列
            2 BFC内部元素不会影响外部元素  --- 不影响布局    
            3 上下的外边距会发生重叠  --- 取较大值
            4 计算高度时，浮动元素也参与计算
            5 内部元素的margin和包含块的border左边相接触  --- 从左边开始
            6 BFC不会和浮动发生重叠


        触发条件
            1 overflow值不为visible
            2 float的值不为none
            3 position 的值为absolute / fixed 
            4 display:inline-block
            5 根元素 html

        作用
            解决margin-top的传递问题      子元素不会影响外部元素
            清除浮动的问题                 浮动参与高度计算
            实现自适应两栏布局              BFC不会和浮动发生重叠
     -->

    <div class="a">1</div>
    <div class="b">2</div>

    <div class="c">
        <div class="c1">浮动并没有参与高度计算，所以导致父元素高度塌陷</div>
        <div class="c2"></div>
    </div>





</body>

</html>